import React, {Component} from 'react'
import UserRouter from '../index'
import {formControlLayout, formLayout, passwordValid} from '../../register'
import {Form, Button, Input, Modal} from 'antd'
import {connect} from 'react-redux'
import {post} from '../../../common/js/utils'

const FormItem = Form.Item

function mapStateToProps(state, props) {
  return {
    userInfo: state.get('userInfo')
  }
}

@Form.create()
@connect(mapStateToProps)
class SettingRouter extends Component {

  state = {
    loading: false
  }

  handleSubmit = e => {
    e.preventDefault()
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        post('/api/users/password', values, loading => {
          this.setState({loading})
        }).then(res => {
          if (res.result === 1) {
            Modal.success({
              title: '提示',
              content: '密码修改成功，请使用新密码重新登录',
              onOk: () => {
                window.location.reload()
              }
            })
          }
        }).catch(err => {
          Modal.warning({
            title: '提示',
            content: String(err),
            onOk: () => {
              this.props.form.resetFields()
            }
          })
        })
      }
    })
  }

  render() {
    const {getFieldDecorator, getFieldValue} = this.props.form

    return (
      <UserRouter>
        <Form
          onSubmit={this.handleSubmit}
          style={{
            width: '500px'
          }}
        >
          <FormItem
            {...formLayout}
            label="原密码"
          >
            {
              getFieldDecorator('oldpassword', {
                rules: [{
                  required: true,
                  message: '请输入原密码'
                }]
              })(<Input placeholder="请输入原密码"/>)
            }
          </FormItem>
          <FormItem
            {...formLayout}
            label="新密码"
          >
            {
              getFieldDecorator('password', {
                rules: [{
                  required: true,
                  message: '请输入新密码'
                }, {
                  validator: (rule, value, callback) => {
                    if (!value) return callback()
                    if (passwordValid(value)) {
                      callback()
                    } else {
                      callback(new Error('数字、字母、下划线，长度6-16位'))
                    }
                  }
                }]
              })(<Input type="password" placeholder="请输入新密码" />)
            }
          </FormItem>
          <FormItem
            {...formLayout}
            label="重复新密码"
          >
            {
              getFieldDecorator('repassword', {
                rules: [{
                  required: true,
                  message: '请重复新密码'
                }, {
                  validator: (rule, value, callback) => {
                    if (!value) return callback()
                    if (getFieldValue('password') === value) {
                      callback()
                    } else {
                      callback(new Error('两次密码输入不一致'))
                    }
                  }
                }]
              })(<Input type="password" placeholder="请重复输入新密码" />)
            }
          </FormItem>
          <FormItem
            {...formControlLayout}
          >
            <Button loading={this.state.loading} type="primary" htmlType="submit">保存</Button>
          </FormItem>
        </Form>
      </UserRouter>
    )
  }
}

export default SettingRouter